<template>
    <div>
        <div class="block">
            <div v-if="!userAddressList.length" style="text-align: center;margin: 1rem 0;">暂无信息</div>
            <template v-if="userAddressList.length">
                <div class="item" v-for="(v,index) in userAddressList">
                    <div><span class="tit">小区</span>：{{v.housinggestate_name}}</div>
                    <div><span class="tit">详细信息</span>：{{v.building_name}} {{v.unit_name}} {{v.floor_name}} {{v.house_name}}</div>
                    <div><span class="tit">联系人</span>：{{v.user_name}}</div>
                    <div><span class="tit">联系电话</span>：{{v.mobile}}</div>
                    <span class="el-icon-lx-delete" @click="delAddress(v)"></span>
                    <span class="el-icon-success" :class="{active: v.is_default}" @click="setDefault(v)"></span>
                </div>
            </template>
        </div>
        <div style="height: 40px;"></div>
        <!--添加-->
        <div @click="addAddress"
            style="position: absolute;bottom: 0;text-align: center;background-color: #20a0ff;color: #fff;width: 100%;line-height: 40px;">
           + 添加地址信息
        </div>

        <div class="confirm-box" v-if="showConfirmBox">
            <div class="confirm-content">
                <div>确定删除？</div>
                <div class="btns" style="margin-top: 2rem;display: flex;justify-content: space-between;">
                    <el-button type="primary" @click="yes">确定</el-button>
                    <el-button @click="no">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "address1",
        data(){
            return{
                userAddressList: [],

                currAddress: {},
                showConfirmBox: false,
            }
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            getMyAddress(){
                this.loadopen();
                this.config.mpost('/api/housinggestate/findMyHousinggestate', {}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.userAddressList = res.data.userAddressList;
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            addAddress(){
                this.$router.push('/mobile/address-add')
            },
            setDefault(v){
                if(v.is_default=='1') return;
                this.loadopen();
                this.config.mpost('/api/housinggestate/changeDefault', {id: v.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getMyAddress();
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            // 弹出删除确认框
            delAddress(v){
                this.currAddress = v;
                this.showConfirmBox = true;
            },
            // 删除
            yes(){
                this.loadopen();
                this.config.mpost('/api/housinggestate/delete', {id: this.currAddress.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.showConfirmBox = false;
                        this.getMyAddress();
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            // 取消删除
            no(){this.showConfirmBox = false;}
        },
        mounted(){
            this.getMyAddress()
        }
    }
</script>

<style scoped lang="less">
    .block{
        .item{
            color: #333;
            padding: .5rem 1rem;
            margin: .8rem;
            box-shadow: 0 0 10px 0 #ccc;
            border-radius: 6px;
            position: relative;
            .tit{
                color: #666;
            }
            .el-icon-lx-delete{
                position: absolute;top: 10px;right: 10px;color: #8c939d;
            }
            .el-icon-success{
                position: absolute;bottom: 10px;right: 10px;color: #8c939d;
            }
            .el-icon-success.active{
                color: #13ce66;
            }
        }
    }
    /*确认弹框*/
    .confirm-box{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .confirm-content{
            width: 80%;
            height: 5rem;
            padding: 1rem;
            box-shadow: 0 0 1rem 0 #ccc;
            border-radius: 10px;
        }
    }
</style>
